<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <script src="./jquery.min.js"></script>

</head>

<body>
    <!-- 创建容器,必须指定宽高 -->
    <!-- 挂载的元素节点 -->
    <div id="main" style="width: 600px;height: 400px;">
        112
    </div>

    <script>
        var chartDOM = document.getElementById('main');
        var myChart = echarts.init(chartDOM);

        // var myChart = echarts.init(document.getElementById('main'));
        var option;
        $.getJSON('./js/data2.jaon',function(json){
console.log()
        })
        var option = {
            title: {
                text: '复习Echarts'
            },
            tooltip: {

            },
            //系列
            series: [{
                type: 'graph',//指定类型
                layout: 'none',
                SymbolSize: 50,//设置点的类型
                //显示
                label: {
                    show: true
                },
                edgeLabel: {
                    formatter: "{c}",
                    show: true,
                },
                //边类型显示,一边圆，一边是箭头
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                //一个一个节点
                data: json.xyz.map(function(json){
                   return{
                    name:json.name,
                    x:json.x,
                    y:json.y,
                   }

                    
                }),
                // links: [],
                //谁和谁有关系
                edges: [
                    {
                        source: 0,
                        target: 1,
                        symbolSize: [5, 20],
                        label: {
                            show: true
                        },
                        value: '孩子',
                        lineStyle: {
                            width: 5,
                            curveness: 0.2
                        }
                    },
                    {
                        source: 'Node 2',
                        target: 'Node 1',
                        label: {
                            show: true
                        },
                        lineStyle: {
                            curveness: 0.2
                        },
                        value: '父子',
                    },
                    {
                        source: 'Node 1',
                        target: 'Node 3'
                    },
                    {
                        source: 'Node 2',
                        target: 'Node 3'
                    },
                    {
                        source: 'Node 2',
                        target: 'Node 4'
                    },
                    {
                        source: 'Node 1',
                        target: 'Node 4'
                    }
                ],

            }
            ]


        }
        myChart.setOption(option)

    </script>
</body>

</html>
